default background and foreground for inline code in dark mode #13182
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
|
This gets more complicated when you consider inline code with In this case, we are getting the background and foreground colors straight from bootstrap code {
font-size: 0.875em;
color: var(--bs-code-color);
background-color: #f8f9fa;
border-radius: .375rem;
padding: .125rem .25rem;
word-wrap: break-word;
}and we don't have any rules for It's easy enough to add a rule for inline code with p code.sourceCode,
li code.sourceCode,
td code.sourceCode {
// same as code:not(.sourceCode) but without unrelated padding stuff
}I don't find the default foreground color
We don't mention Granted, it's better than not doing anything, see "before" image above; here are afters:
Conclusion: it's fine in darkly, so maybe this is a theme problem. 
Will merge once I've completed the playwright tests. Footnotes
|
i simply report i do not try to explain but it looks like a11y has a dark mode inline code foreground color
gordonwoodhull
force-pushed
the
bugfix/8568
branch
from
c38241a to
91644e9
Compare
fixes #8568 this minimal and defensive change (found and iterated with Claude) changes inline code without .sourceCode to use the same default background and foreground colors as the block code, when in dark mode. it is probably more defensive than it needs to be it also causes code with .sourceCode to default to the code block background if not otherwise specified, instead of $grey-100, in both modes.
gordonwoodhull
force-pushed
the
bugfix/8568
branch
from
91644e9 to
8c557cf
Compare
Default inline code background color, both with and with and without
sourceCode, to the block background color and not$grey-100Fixes #8568
It leaves the inline code foreground color defaulted to purple in light mode, which seems to be intentional. In dark mode, it uses
$pre-colorwhich exists in that mode.I think the fix is correct and safe but it may be more convoluted than we want.
The problem is,
$code-bg, which controls the inline code background color, has a bad default for dark mode of$gray-100(in_bootstrap-variables.scss) but the way to calculate the correct color for dark mode is not known until_bootstrap-rules.scss.I couldn't
!defaultit, or set it outright, so Claude suggested this kludge of checking if$code-bghas its default setting. 😛I have tested this manually
brand.typography.monospace-inline.background-color(which is the current workaround for the original bug).No warnings.
Includes playwright tests for a11y and arrow themes.
Visual design considerations
This is the minimal change, but
git blame, it took a while to settle on this color.)